import React, {Component} from 'react';
import {Form, Space, Input, Button, Select, Typography, Card} from "antd";

const {Paragraph} = Typography;

class Applet extends Component {
    state = {
        data: "",
    }
    onFinish = async (values) => {
        console.log(values)
        this.setState({
            data: encodeURIComponent(JSON.stringify(values)),
        })
    }
    onValuesChange = (values) => {
        // console.log(values)
    }
    reset = () => {
        this.formRef.resetFields()
        this.setState({
            data: ""
        })
    }

    render() {
        const {itemList} = this.state
        return (
            <div className="p-layout-box">
                <Form
                    labelCol={{span: 3}}
                    wrapperCol={{span: 4}}
                    onFinish={this.onFinish}
                    onValuesChange={this.onValuesChange}
                    ref={ref => this.formRef = ref}
                >
                    {/*<Form.Item*/}
                    {/*    label="目标指令(act)" name="act"*/}
                    {/*    rules={[{required: true, message: '请选择'}]}*/}
                    {/*    initialValue={"openGoodsDetail"}*/}
                    {/*>*/}
                    {/*    <Select*/}
                    {/*        options={[*/}
                    {/*            {*/}
                    {/*                "value": "openGoodsDetail",*/}
                    {/*                "label": "商品详情"*/}
                    {/*            },*/}
                    {/*        ]}*/}
                    {/*    />*/}
                    {/*</Form.Item>*/}
                    <Form.Item
                        label="type" name="type"
                        rules={[{required: true}]}
                        getValueFromEvent={e => e.target.value.trim()}
                        initialValue={"1"}
                    >
                        <Input disabled/>
                    </Form.Item>
                    <Form.Item
                        label="url" name="url"
                        rules={[{required: true}]}
                        getValueFromEvent={e => e.target.value.trim()}
                    >
                        <Input/>
                    </Form.Item>
                    <Form.Item
                        wrapperCol={{
                            offset: 3,
                            span: 10,
                        }}
                    >
                        <Space>
                            <Button onClick={() => this.reset()}>重置</Button>
                            <Button haspermi={['miniAdConfig:create']} htmlType="submit" type="primary">生成</Button>
                        </Space>
                    </Form.Item>
                </Form>
                <Card
                    title="生成结果"
                >
                    {
                        this.state.data ? <Paragraph copyable>{"arguments="+this.state.data}</Paragraph> : null
                    }
                </Card>
            </div>
        );
    }
}

export default Applet;
